<template >
    <div id="trade" v-if="hasData"></div>
    <el-empty v-else image="https://s2.loli.net/2022/11/10/tHhaJldeu4gL95f.png" />
</template>
<script>
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DataZoomComponent,
    MarkLineComponent,
    MarkPointComponent
} from 'echarts/components';
import { CandlestickChart, LineChart, BarChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import axios from 'axios';

echarts.use([
    // BarChart,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DataZoomComponent,
    MarkLineComponent,
    MarkPointComponent,
    CandlestickChart,
    LineChart,
    BarChart,
    CanvasRenderer,
    UniversalTransition
]);

export default {
    props: {
        code: { type: String },
        start: { type: String },
        end: { type: String }
    },
    watch: {
        code(newCode, old) {
            if (newCode !== old) {
                this.getChart()
            }
        },
        start(newStart, old) {
            if (newStart !== old) {
                this.getChart()
            }
        },
        end(newEnd, old) {
            if (newEnd !== old) {
                this.getChart()
            }
        }
    },
    data() {
        return {
            option: {},
            data0: undefined,
            result: [],
            hasData: false,
        }
    },
    methods: {
        getChart() {
            const upColor = '#ec0000';
            const upBorderColor = '#8A0000';
            const downColor = '#00da3c';
            const downBorderColor = '#008F28';
            if (this.code && this.start && this.end) {
                this.hasData = true;
                axios({
                    method: 'get',
                    url: '/api/signal/getAll?start=' + this.start + '&end=' + this.end + '&code=' + this.code,
                }).then(res => {
                    if (res.data.code === 1) {
                        let chartDom = document.getElementById('trade');
                        let myChart = echarts.init(chartDom);
                        this.result = res.data.result
                        this.data0 = this.formatterData(this.result)
                        this.option = {
                            animation: true,
                            title: {
                                text: this.result[0].name,
                                left: 0
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            legend: {
                                data: ['日K']
                            },
                            grid: [
                                {
                                    left: '10%',
                                    right: '10%',
                                    height: '50%'
                                },
                                {
                                    left: '10%',
                                    right: '8%',
                                    top: '63%',
                                    height: '16%'
                                }
                            ],
                            axisPointer: { // 有多余的行
                                link: [
                                    {
                                        xAxisIndex: 'all'
                                    }
                                ],
                                label: {
                                    backgroundColor: '#777'
                                }
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: this.data0.categoryData,
                                    boundaryGap: false,
                                    axisLine: { onZero: false },
                                    splitLine: { show: false },
                                    min: 'dataMin',
                                    max: 'dataMax',
                                    axisPointer: {
                                        z: 100
                                    }
                                },
                                {
                                    type: 'category',
                                    gridIndex: 1,
                                    data: this.data0.categoryData,
                                    boundaryGap: false,
                                    axisLine: { onZero: false },
                                    axisTick: { show: false },
                                    splitLine: { show: false },
                                    axisLabel: { show: false },
                                    min: 'dataMin',
                                    max: 'dataMax'
                                }
                            ],
                            yAxis: [
                                {
                                    scale: true,
                                    splitArea: {
                                        show: true
                                    }
                                },
                                {
                                    scale: true,
                                    gridIndex: 1,
                                    splitNumber: 2,
                                    axisLabel: { show: false },
                                    axisLine: { show: false },
                                    axisTick: { show: false },
                                    splitLine: { show: false }
                                }
                            ],
                            dataZoom: [
                                {
                                    type: 'inside',
                                    xAxisIndex: [0, 1],
                                    start: 50,
                                    end: 100
                                },
                                {
                                    show: true,
                                    xAxisIndex: [0, 1],
                                    type: 'slider',
                                    top: '90%',
                                    start: 50,
                                    end: 100
                                }
                            ],
                            series: [
                                {
                                    name: '日K',
                                    type: 'candlestick',
                                    data: this.data0.values,
                                    itemStyle: {
                                        color: upColor,
                                        color0: downColor,
                                        borderColor: upBorderColor,
                                        borderColor0: downBorderColor,

                                    },
                                    markPoint: {
                                        label: {
                                            formatter: function (param) {
                                                return param != null ? Math.round(param.value) + '' : '';
                                            }
                                        },
                                        data: [
                                            {
                                                name: 'highest value',
                                                type: 'max',
                                                valueDim: 'highest'
                                            },
                                            {
                                                name: 'lowest value',
                                                type: 'min',
                                                valueDim: 'lowest'
                                            },
                                        ],
                                        tooltip: {
                                            formatter: function (param) {
                                                return param.name + '<br>' + (param.data.coord || '');
                                            }
                                        }
                                    },
                                    markLine: {
                                        symbol: ['none', 'none'],
                                        data: [
                                            [
                                                {
                                                    name: 'from lowest to highest',
                                                    type: 'min',
                                                    valueDim: 'lowest',
                                                    symbol: 'circle',
                                                    symbolSize: 10,
                                                    label: {
                                                        show: false
                                                    },
                                                    emphasis: {
                                                        label: {
                                                            show: false
                                                        }
                                                    }
                                                },
                                                {
                                                    type: 'max',
                                                    valueDim: 'highest',
                                                    symbol: 'circle',
                                                    symbolSize: 10,
                                                    label: {
                                                        show: false
                                                    },
                                                    emphasis: {
                                                        label: {
                                                            show: false
                                                        }
                                                    }
                                                }
                                            ],
                                            {
                                                name: 'min line on close',
                                                type: 'min',
                                                valueDim: 'close'
                                            },
                                            {
                                                name: 'max line on close',
                                                type: 'max',
                                                valueDim: 'close'
                                            }
                                        ]
                                    }
                                },
                                {
                                    name: '成交量',
                                    type: 'bar',
                                    xAxisIndex: 1,
                                    yAxisIndex: 1,
                                    data: this.data0.trades
                                },
                                {
                                    name: '成交额',
                                    type: 'bar',
                                    xAxisIndex: 1,
                                    yAxisIndex: 1,
                                    data: this.data0.transactions
                                }
                            ]
                        };
                        myChart.setOption(this.option);
                    } else {
                        this.hasData = false;
                    }
                })
            }
        },
        formatterData(data) {
            let dates = []
            let datas = []
            let trades = []
            let transactions = []
            data.forEach(trade => {
                dates.push(this.formatterDate(trade.date));
                datas.push([trade.open, trade.close, trade.lowest, trade.highest])
                trades.push(trade.traded)
                transactions.push(trade.transaction)
            })
            return {
                categoryData: dates, // 日期
                values: datas, // 每日数据
                trades: trades,
                transactions: transactions
            }
        },
        formatterDate(date) {
            let newDate = new Date(date)
            return newDate.getFullYear() + "/" + (newDate.getMonth() + 1) + "/" + newDate.getDate()
        },
    },
    mounted() {
        this.getChart();
    }

}

</script>
<style scoped>
#trade {
    height: 400px;
}
</style>